<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
    <title>Vite App</title>
  </head>
  <body>

  <div id="app">
    <div :style="{color:selfColor,fonSize:selfFontSize+'px'}">
        1
    </div>
    <div :style="styleObject">
        ABC
    </div>
    <div :style="[baseStyles,overridingStyles]">
        水水水
    </div>
  </div>

  <script>
    const app={
        data(){
            return{
                selfColor:'red',
                selfFontSize:10,
                styleObject:{
                    color:'red',
                    fontsize:"30px"
                },
                baseStyles:{
                    color:'green',
                    fontsize:'30px'
                },
                overridingStyles:{
                    'font-weight':'bold'
                },
            }
        }
    }
    Vue.createApp(app).mount('#app')
  </script>
  </body>
</html>